<template>
  <div class="home-card">
    <div class="border-bottom mb-3">
      <div class="float-right py-3">
        <a
          :href="indexJinde.url"
          target="_blank"
        >更多</a>
      </div>
      <ul class="nav">
        <li class="nav-item">
          <a
            class="nav-link active px-0"
            :href="indexJinde.url"
            target="_blank"
          >{{indexJinde.title}}</a>
        </li>
      </ul>
    </div>
    <div class="home-card-bd">
      <div
        class="mb-3"
        v-for="(item,index) in indexJinde.list"
        :key="index"
      >
        <a
          target="_balnk"
          :title="item.title"
          :href="indexJinde.url + indexJinde.path +'/' +item.id"
        >
          <div class="title">{{item.title}}</div>
          <div
            class="d-flex"
            v-if="index==0"
          >
            <img
              class="mr-2 flex-shrink-0"
              :src="item.thumb"
            >
            <div
              class="abstract"
              v-html="item.description"
            ></div>
          </div>
        </a>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'jinnews',
  data () {
    return {
      indexJinde: {}
    }
  },
  watch: {
    list (value) {
      this.indexJinde = value
    }
  },
  props: {
    param: {
      type: Object,
      required: false,
      default: () => ({})
    },
  },
  created () {
    this.param.str = 'Jinde'
    this.param.limit = this.param.limit ? this.param.limit : 5
    this.setThirdData(this.param)
    this.indexJinde = this.list || {}
  },
  computed: {
    ...mapState({
      list: state => state.thirdParty.Jinde,
    })
  },
  methods: {
    ...mapActions("thirdParty", ['setThirdData'])
  }

}
</script>
<style scoped>
.abstract {
  line-height: 2;
  font-size: 1rem;
  overflow: hidden;
  height: 6rem;
}
.nav-item a {
  border-bottom: 0.3rem solid #007bff;
  color: #007bff !important;
  font-size: 1.4rem;
}
.home-card-bd .title {
  height: 1.5rem;
  overflow: hidden;
  font-size: 1.25rem;
  margin-bottom: 0.8rem;
  line-height: 1.2;
  display: block;
}
</style>


